<template>
  <div class="ss">
    <el-row>
      <el-col :sm="{ span: 8, offset: 8 }" :xs="{ span: 24, offset: 0 }">
        <div class="grid-content bg-purple-dark">
          <div>
            <div class="zt">
              <span class="title" style="font-weight: bold">账号登录</span>
            </div>
            <!--账号登录 #start -->
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="账号：" prop="username">
                <el-input
                  placeholder="请输入账号"
                  class="ss1"
                  type="text"
                  v-model="ruleForm.username"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="密码：" prop="password">
                <el-input
                  placeholder="密码"
                  class="ss1"
                  type="password"
                  show-password
                  v-model="ruleForm.password"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <router-link
                  :to="{ path: 'Resetpassword' }"
                  style="float: left"
                  class="router-link-active"
                >
                  <el-link type="danger">忘记密码？</el-link>
                </router-link>
              </el-form-item>
              <el-form-item style="margin-right: -100px">
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="margin-left: -40px; margin-right: 20px"
                  >登录</el-button
                >
                <router-link :to="{ path: 'register' }">
                  <el-button> 注册用户</el-button>
                </router-link>
              </el-form-item>
            </el-form>
          </div>
        </div></el-col
      >
    </el-row>

    <!--登录 #end -->
  </div>
</template>
<script>
import cookie from "js-cookie";
import userInfoApi from "@/api/userInfo.js";
export default {
  data() {
    const validatepassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkpassword !== "") {
          this.$refs.ruleForm.validateField("checkpassword");
        }
        callback();
      }
    };
    const validateusername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号或邮箱"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateusername, trigger: "blur" }],
        password: [{ validator: validatepassword, trigger: "blur" }],
      },
    };
  },
  created() {
    if (cookie.get("campus-token") !== undefined) {
      this.$router.push("/?types=cgs");
    } else if (this.$route.query.id !== "") {
      if (this.$route.query.id === "1") {
        this.$message.error("请先登录！");
      } else if (this.$route.query.id === "2") {
        this.$message.success("修改成功!请登录!");
      }
      this.$router.push("/userlogin");
    }
  },
  methods: {
    // 用户登录
    submitForm(formName) {
      userInfoApi
        .login(this.ruleForm)
        .then((response) => {
          // 登录成功 设置cookie
          this.setCookies(
            response.data.name,
            response.data.token,
            response.data.uid
          );
        })
        .catch((response) => {
          cookie.remove("campus-token");

          if(response.message === "Bad credentials"){
            this.$message.error('密码错误');
          }
        });
    },
    //设置COOKIE
    setCookies(name, token, uid) {
      cookie.set("campus-token", token, { expires: 3, path: "/" });
      cookie.set("name", name, { expires: 3, path: "/" });
      cookie.set("uid", uid, { expires: 3, path: "/" });
      // console.log(uid);
      window.location.reload();
    },
  },
};
</script>
<style>
.zt {
  width: 100%;
  text-align: center;
  padding: 20px;
}
.ss {
  margin: 0 auto;
  height: 100%;
}

.router-link-active {
  text-decoration: none;
}
</style>
